<template>
  <div class="log-container">
    <!-- 顶部选项卡 -->
    <el-tabs v-model="activeTab" class="log-tabs">
      <el-tab-pane label="日志" name="log">
		  <!-- 搜索区域 -->
		  <div class="search-area">
		    <el-input
		      v-model="searchKeyword"
		      placeholder="请输入搜索关键词"
		      class="search-input"
		      clearable
			  size="mini"
		    ></el-input>
		    
		    <el-select size="mini" v-model="timeRange" placeholder="时间范围" class="time-select">
		      <el-option label="1小时内" value="1h"></el-option>
		      <el-option label="1天内" value="1d"></el-option>
		      <el-option label="1周内" value="1w"></el-option>
		      <el-option label="1个月内" value="1m"></el-option>
		      <el-option label="半年内" value="6m"></el-option>
		      <el-option label="1年内" value="1y"></el-option>
		    </el-select>
		    
		    <el-select v-model="logType" size="mini" placeholder="日志类型" class="type-select">
		      <el-option label="日志时间" value="logTime"></el-option>
		      <el-option label="操作时间" value="operateTime"></el-option>
		      <el-option label="更新时间" value="updateTime"></el-option>
		    </el-select>
		    
		    <el-button type="success" size="mini" icon="el-icon-Ssearch" class="search-btn" @click="handleSearch">
		      搜索
		    </el-button>
		  </div>
		  
		  <!-- 图表区域 -->
		  <div class="chart-container">
		    <div ref="chart" style="width: 100%; height: 300px;"></div>
		  </div>
		  
		  <!-- 表格区域 -->
		  <div class="table-container">
		    <el-table
		      :data="tableData"
		      stripe
		      style="width: 100%"
		      height="calc(100vh - 666px)"
		      v-loading="loading"
		    >
		      <el-table-column
		        prop="index"
		        label="序号"
		        width="68"
		        fixed
		      ></el-table-column>
		      <el-table-column
		        prop="logTime"
		        label="日志时间"
		        width="150"
		      ></el-table-column>
		      <el-table-column
		        prop="operator"
		        label="操作人"
		        width="120"
		      ></el-table-column>
		      <el-table-column
		        prop="logDetail"
		        label="日志详情"
		        width="288"
		        show-overflow-tooltip
		      >
		        <template slot-scope="scope">
		          <span class="log-detail">{{ scope.row.logDetail }}</span>
		        </template>
		      </el-table-column>
		      <el-table-column
		        prop="result"
		        label="结果"
		        width="100"
		      >
		        <template slot-scope="scope">
		          <el-tag :type="scope.row.result === 'success' ? 'success' : 'danger'">
		            {{ scope.row.result }}
		          </el-tag>
		        </template>
		      </el-table-column>
		      <el-table-column
		        prop="operation"
		        label="操作事件"
		        width="150"
		      ></el-table-column>
		      <el-table-column
		        prop="target"
		        label="目标对象"
		        width="120"
		      >
		        <template slot-scope="scope">
		          <el-tag :type="scope.row.target === '本系统' ? '' : 'info'">
		            {{ scope.row.target }}
		          </el-tag>
		        </template>
		      </el-table-column>
			  
			  <el-table-column
			    prop="grades"
			    label="级别"
			    width="120"
			  >
			  </el-table-column>
			  <el-table-column
			    prop="jkName"
			    label="原调口"
			    width="120"
			  >
			  </el-table-column>
			  <el-table-column
			    prop="zjName"
			    label="源主机名"
			    width="120"
			  >
			  </el-table-column>
			  <el-table-column
			    prop="SbId"
			    label="设备Id"
			    width="120"
			  >
			  </el-table-column>
		      <el-table-column
		        label="操作"
		        width="100"
		        fixed="right"
		      >
		        <template slot-scope="scope">
		          <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
		        </template>
		      </el-table-column>
		    </el-table>
		  </div>
		  
		  <!-- 分页区域 -->
		  <div class="pagination-container">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="currentPage"
		      :page-sizes="[10, 20, 50, 100]"
		      :page-size="pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total"
		    ></el-pagination>
		  </div>
	  </el-tab-pane>
      <el-tab-pane label="数据" name="data"></el-tab-pane>
      <!-- 可根据需要添加更多选项卡 -->
    </el-tabs>

    
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'BaseInfo',
  data() {
    return {
      activeTab: 'log', // 默认激活的选项卡
      searchKeyword: '', // 搜索关键词
      timeRange: '', // 时间范围
      logType: '', // 日志类型
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示数量
      total: 100, // 总条目数
      loading: false, // 表格加载状态
      tableData: [], // 表格数据
      chart: null // ECharts实例
    };
  },
  mounted() {
    this.initChart();
    this.fetchTableData();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    // 初始化图表
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      
      // 模拟数据：当前时间往前6小时的数据
      const now = new Date();
      const hours = [];
      const data = [];
      
      for (let i = 12; i >= 0; i--) {
        const time = new Date(now.getTime() - i * 60 * 60 * 1000);
        hours.push(`${time.getHours()}:00`);
        data.push(Math.floor(Math.random() * 100) + 20); // 随机生成数据
      }
      
      const option = {
        title: {
          text: '当天日志统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: hours
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data,
          type: 'bar',
          itemStyle: {
            color: '#409EFF'
          }
        }]
      };
      
      this.chart.setOption(option);
      
      // 响应窗口大小变化
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
    
    // 获取表格数据
    fetchTableData() {
      this.loading = true;
      
      // 模拟数据获取
      setTimeout(() => {
        // 模拟数据
        this.tableData = [];
        for (let i = 0; i < this.pageSize; i++) {
          const index = (this.currentPage - 1) * this.pageSize + i + 1;
          const isSuccess = Math.random() > 0.3;
          const target = Math.random() > 0.5 ? '本系统' : '医保';
		  const jkName = Math.random() > 0.5 ? '老游接口' : '老古接口';
		  const zjName = Math.random() > 0.5 ? 'HUAWEI' : 'zcw';
		  const SbId = Math.random() > 0.5 ? 'B02479E9-B87A-4185-B622-A2C89C91AF77' : '00342-35273-65744-AAOEM';
          this.tableData.push({
            index: index,
            logTime: `2018-07-24 ${14 + Math.floor(i/6)}:${i % 60 < 10 ? '0' + (i % 60) : i % 60}:01`,
            operator: `帅逼${Math.floor(Math.random() * 10) + 1}`,
            logDetail: `这是一条日志详情描述文字，可能会很长需要隐藏并显示省略号。索引号为${index}`,
            result: isSuccess ? 'success' : 'fail',
            operation: `操作事件${Math.floor(Math.random() * 5) + 1}`,
            target: target,
			grades: `${Math.floor(Math.random() * 6) + 1}`,
			jkName: jkName,
			zjName: zjName,
			SbId: SbId,
          });
        }
        
        this.loading = false;
      }, 500);
    },
    
    // 处理搜索
    handleSearch() {
      this.currentPage = 1;
      this.fetchTableData();
    },
    
    // 处理详情查看
    handleDetail(row) {
      this.$message.info(`查看详情：${row.index}`);
      // 实际项目中这里可以打开详情对话框或跳转到详情页
    },
    
    // 每页数量变化
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchTableData();
    },
    
    // 页码变化
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchTableData();
    }
  }
};
</script>

<style lang="less" scoped>
.log-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  
  .log-tabs {
    margin-bottom: 20px;
  }
  
  .search-area {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    
    .search-input {
      width: 250px;
      margin-right: 15px;
    }
    
    .time-select {
      width: 120px;
      margin-right: 15px;
    }
    
    .type-select {
      width: 120px;
      margin-right: 15px;
    }
    
    .search-btn {
      width: 100px;
    }
  }
  
  .chart-container {
    height: 300px;
    margin-bottom: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .table-container {
    flex: 1;
    overflow: hidden;
    margin-bottom: 60px; /* 为分页留出空间 */
    
    .log-detail {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  .pagination-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .log-container {
    padding: 10px;
    
    .search-area {
      flex-wrap: wrap;
      
      .search-input,
      .time-select,
      .type-select {
        margin-bottom: 10px;
        width: 100%;
      }
    }
    
    .pagination-container {
      right: 10px;
      left: 10px;
    }
  }
}
</style>